class: center, middle, title-slide # Interactive Visualization ## PM 566: Introduction to Health Data Science ### Abigail Horn --- <style type="text/css"> pre{ font-size:20px; } code.r,code.cpp{ font-size:large } </style> # Introduction to interactive visualization --- ## What is interactive visualization? - Interactive visualization involves the creation and sharing of interactive data objects - Interactive data objects are graphical representations of data, model, or results that allow a user to directly manipulate and explore - Some example products and packages in R: -- - Interactive plots (`Plotly`) - Interactive maps (`plotly`, `Leaflet`) - Interactive tables (`formattable`, `DT`) - Dashboards (`flexdashboard`) - Interactive applications (`shiny`) - Websites (Static using `R Markdown`, `blogdown`, `Hugo`, `Jeckyll`) --- ## What is interactive visualization (cont'd) - Interactivity allows users to engage with data, a model, algorithm, or other visualization in a way that static visuals cannot - Features of interactivity include: -- - Identify, isolate, and visualize information for extended periods of time - Zoom in and out - Highlight relevant information - Get more information - Filter - Animate - Change parameters --- # Why use interactive visualization? - In this course we’ve covered visualization and in particular how `ggplot()` can help to make static plots with many dimensions - But what if you want to explore a third or fourth dimension of data -- quickly? Or without all the noise? Or identify strange values? - Or, what if you want to communicate your findings to an external audience? Specifically, if you want that audience to engage with or explore the data? Interactive visualization helps with both the **exploration** and **communication** parts of the data science process <div style="text-align: center;"> <figure> <img style="width: 500px;vertical-align: middle;" hspace="20px" src="img/data-science-2.png" alt="data_science_interactive_viz" </figure> <figcaption><b>Where interactive visualization fits in to the data science workflow</b></figcaption> </div> --- ## Interactive Visualization for **exploratory data analysis** (EDA) - Interactive graphics are well suited to aid the exploration of high-dimensional or otherwise complex data - Interacting with information in a visual way helps to enable insights that wouldn’t be easy or even possible with static graphics, for reasons including: -- - **Investigate faster**: In a true exploratory setting, you have to make lots of visualizations, and investigate lots of follow-up questions, before stumbling across something truly valuable. Interactive visualization can aid in the sense-making process by searching for information quickly without fully specified questions (Unwin and Hofmann 1999) -- - **Identifying relationships or structure that would otherwise go missing** (J. W. Tukey and Fisherkeller 1973) -- - **Understand and diagnose problems with data, models, or algorithms** (Wickham, Cook, and Hofmann 2015) --- ## Interactive Visualization for **EDA** (cont'd) - In a true exploratory setting, you have to make lots of visualizations, and investigate lots of follow-up questions, before stumbling across something truly valuable - Although interactivity can augment EDA, it’s typically only *practical* when we can create and alter visuals quickly - Plotly and Leaflet are well suited to these tasks -- they make the added effort required to enable functionality relatively small --- ## Interactive Visualization for **EDA** (cont'd) - Use the LA times data -- show the erroneous value --- ## Interactive visualization for **communication** - Engagement with information has been shown to improve the ability to retain information <div style="text-align: center;"> <figure> <img style="width: 550px;vertical-align: middle;" hspace="20px" src="https://i0.wp.com/www.worklearning.com/wp-content/uploads/2015/01/Cone_of_learning_export_from_Wikipedia_11-11-2007.jpg?resize=705%2C518&ssl=1" alt="Edgar Dale Cone of Experience" </figure> <figcaption><b>Edgar Dale's Cone of Learning</b></figcaption> </div> --- ## Interactive visualization for **communication** (cont'd) - Automate and efficiently share multiple dimensions of data/models/findings or complex analysis tasks - Help users to better understand, and make decisions on, data/models/findings [Our COVID modeling website](https://uscbiostats.github.io/COVID19/index.html) <div style="text-align: center;"> <a href="https://epimodel.shinyapps.io/covid-university/"> <figure> <img style="width: 700px;vertical-align: middle;" hspace="20px" src="img/COVID-uni-testing.png" alt="EpiModel University Testing" </figure> <figcaption><b>EpiModel Shiny app for COVID testing at universities</b></figcaption> </div> --- ## Interactive visualization for **communication** (cont'd) - Tell a more interesting or engaging story, presenting multiple viewpoints of data - Allow users to focus on the aspects most important to them, making the user more likely to understand, learn from, remember and appreciate the data <div style="text-align: center;"> <a href="https://inequality.media.mit.edu/"> <figure> <img style="width: 700px;vertical-align: middle;" hspace="20px" src="img/atlas-of-inequality.png" alt="MIT-inequality" </figure> <figcaption><b>MIT Media Lab Atlas of Inequality</b></figcaption> </div> --- # Plan for today - Survey of interactive graphics in both of their uses: exploration and communication - We're going to look at creating interactive graphs, maps, and tables with `Plotly`, `Leaflet`, and `formattable` - We will look at how to share these plots - You will create your own project website using RStudio and GitHub pages - We will survey other possibilities (Shiny apps, dashboards) --- ## What is Plotly? <div style="text-align: center;"> <figure> <img style="width: 200px;vertical-align: middle;" hspace="20px" src="img/plotly.png" alt="Plotly" </figure> </div> - Plotly is a web application for creating and sharing interactive graphics - Is powered by JavaScript graphing library plotly.js and is designed on principles of adding layers - Plotly can work with several programming languages and applications including R, JavaScript, Python, Matlab, and Excel. --- ## Install Plotly Installing Plotly is easy ```r #install.packages("plotly") library(plotly) ``` --- ## Load data for examples ```r # load the plotly R package library(plotly) # load the diamonds dataset from the ggplot2 package data(diamonds, package = "ggplot2") diamonds ``` ``` ## # A tibble: 53,940 x 10 ## carat cut color clarity depth table price x y z ## <dbl> <ord> <ord> <ord> <dbl> <dbl> <int> <dbl> <dbl> <dbl> ## 1 0.23 Ideal E SI2 61.5 55 326 3.95 3.98 2.43 ## 2 0.21 Premium E SI1 59.8 61 326 3.89 3.84 2.31 ## 3 0.23 Good E VS1 56.9 65 327 4.05 4.07 2.31 ## 4 0.290 Premium I VS2 62.4 58 334 4.2 4.23 2.63 ## 5 0.31 Good J SI2 63.3 58 335 4.34 4.35 2.75 ## 6 0.24 Very Good J VVS2 62.8 57 336 3.94 3.96 2.48 ## 7 0.24 Very Good I VVS1 62.3 57 336 3.95 3.98 2.47 ## 8 0.26 Very Good H SI1 61.9 55 337 4.07 4.11 2.53 ## 9 0.22 Fair E VS2 65.1 61 337 3.87 3.78 2.49 ## 10 0.23 Very Good H VS1 59.4 61 338 4 4.05 2.39 ## # … with 53,930 more rows ``` --- ## `plot_ly()` vs. `ggplotly()` - There are two main ways to create a plotly object: - Transforming a `ggplot2` object (via `ggplotly()`) into a plotly object - Directly initializing a plotly object with `plot_ly()`/`plot_geo()`/`plot_mapbox()` - Both approaches are powered by the JavaScript graphing library plotly.js so many of the same concepts and tools that you learn for one interface can be reused in the other --- ## `plot_ly()` - Any graph made with the **plotly** R package is powered by the JavaScript library [plotly.js](https://github.com/plotly/plotly.js) - The `plot_ly()` function provides a 'direct' interface to plotly.js with some additional abstractions to help reduce typing. - If we assign variable names (e.g., `cut`, `clarity`, etc.) to visual properties (e.g., `x`, `y`, `color`, etc.), `plot_ly()` tries to find a sensible geometric representation of that information for us --- ## `plot_ly()` ```r plot_ly(diamonds, x = ~cut, y = ~clarity) ``` --- ## `plot_ly()`
--- ## `plot_ly()` functionality The `plot_ly()` function has numerous arguments that are unique to the R package (e.g., `color`, `stroke`, `span`, `symbol`, `linetype`, etc.) and make it easier to encode data variables (e.g., diamond clarity) as visual properties (e.g., color). By default, these arguments map values of a data variable to a visual range defined by the plural form of the argument. In this example, `color` is used to map each level of diamond clarity to a different color. Then, `colors` is used to specify the range of colors (which, in this case, the `"Accent"` color palette from the **RColorBrewer** package, but one can also supply custom color codes or a color palette function like `colorRamp()`). --- ## `plot_ly()` functionality ```r plot_ly(diamonds, x = ~cut, color = ~clarity, colors = "Accent") ``` --- ## `plot_ly()` functionality
--- ## `layout()` - (almost) every function anticipates a **plotly** object as input to its first argument and returns a modified version of that **plotly** object. - For example, the `layout()` function anticipates a **plotly** object in its first argument and its other arguments add and/or modify various layout components of that object (e.g., the title): --- ## `layout()` ```r layout( plot_ly(diamonds, x = ~cut), title = "My beatiful histogram" ) ``` --- ## `layout()`
--- ## `layout()` or using the `%>%` operator from the **magrittr** package: ```r diamonds %>% plot_ly(x = ~cut) %>% layout(title = "My beatiful histogram") ``` --- ## Layers and `add_*()` - In addition to `layout()` for adding/modifying part(s) of the graph's layout, there are also a family of `add_*()` functions (e.g., `add_histogram()`, `add_lines()`, etc.) that define how to render data into geometric objects. - These functions add a graphical layer to a plot. A *layer* can be thought of as a group of graphical elements that can be sufficiently described using only 5 components: - data - aesthetic mappings (e.g., assigning `clarity` to `color`) - a geometric representation (e.g., rectangles, circles, etc.) - statistical transformations (e.g., sum, mean, etc.) - positional adjustments (e.g., dodge, stack, etc.). --- ## Layers and `add_*()` Let's add an `add_histogram()` layer: ```r diamonds %>% plot_ly() %>% add_histogram(x = ~cut) ``` --- ## Layers and `add_*()` Let's add an `add_histogram()` layer:
--- # `ggplotly()` - We also have the option of working with `ggplotly()` function from the **plotly** package, which can translate **ggplot2** to **plotly**. - The essence of this is very straightforward: ```r p <- ggplot(*) + geom_*() ggplotly(p) ``` - This functionality can be really helpful for quickly adding interactivity to your existing **ggplot2** workflow. - `ggplotly()` can be desirable for creating visualizations that aren't necessarily straightforward to achieve without it. This can be particularly true for exploring statistical summaries across groups. The ability to quickly generate statistical summaries across groups works for basically any geom (e.g., `geom_boxplot()`, `geom_histogram()`, `geom_density()`, etc.) --- ## Basic Scatterplot - `plot_ly()` allows basic scatterplots - Specify a scatterplot by `type = "scatter"` and `mode = 'markers'` - Notice how the arguments for the `x` and `y` variables as specified as formulas, with the tilde operator (`~`) - Use `color` to specify additional dimension (factor or continuous) - Notice the automatic `tooltip` that appears when your mouse hovers over each point - Doubleclick any item in legend to isolate that point ```r library(plotly) cv_states_today %>% plot_ly(x = ~deathsper100k, y = ~per100k, type = 'scatter', mode = 'markers', color = ~state) ``` --- ## Basic Scatterplot
--- ## Scatterplot: size - You can add an additional dimension by adjusting the `size` of each point (also with `~` operator) - Specify the limits of the size through `sizes` - `sizemode` specifies `'area'` or `'diameter'` ```r cv_states_today %>% plot_ly(x = ~deathsper100k, y = ~per100k, type = 'scatter', mode = 'markers', color = ~state, size = ~population, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5)) ``` --- ## Scatterplot: size ``` ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ```
--- ## Specifying hover information - You can specify what info will appear when hovering using `hoverinfo` through the `text` argument (also with `~` operator) - Multiple variables can be included upon hover - Create new lines between variables in `hoverinfo` using `sep = "<br>"` ```r cv_states_today %>% plot_ly(x = ~deathsper100k, y = ~per100k, type = 'scatter', mode = 'markers', color = ~state, size = ~naive_CFR, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5), hoverinfo = 'text', text = ~paste( paste(state, ":", sep=""), paste(" Cases per 100k: ", per100k, sep="") , paste(" Deaths per 100k: ", deathsper100k, sep=""), paste(" CFR (%): ", naive_CFR,sep=""), sep = "<br>")) ``` --- ## Specifying hover information ``` ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ```
--- ## Layout - Specify chart labels through `layout()` - `hovermode = "compare"` allows comparing multiple points (default is `"closest"`) ```r cv_states_today %>% plot_ly(x = ~deathsper100k, y = ~per100k, type = 'scatter', mode = 'markers', color = ~state, size = ~naive_CFR, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5), hoverinfo = 'text', text = ~paste( paste(state, ":", sep=""), paste(" Cases per 100k: ", per100k, sep="") , paste(" Deaths per 100k: ", deathsper100k, sep=""), paste(" CFR (%): ", naive_CFR,sep=""), sep = "<br>")) %>% layout(title = "Cases, Deaths, and Naive Case Fatality Rate for US States", yaxis = list(title = "Cases"), xaxis = list(title = "Deaths"), hovermode = "compare") ``` --- ## Layout ``` ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ```
--- ## 3D Scatterplot - Can add a 3rd dimension using `type = 'scatter3d'` (make sure to specify the dimension as `z`) ```r cv_states_today %>% plot_ly(x = ~deathsper100k, y = ~per100k, z = ~population, type = 'scatter3d', mode = 'markers', color = ~state, size = ~naive_CFR, sizes = c(5, 70), marker = list(sizemode='diameter', opacity=0.5), hoverinfo = 'text', text = ~paste( paste(state, ":", sep=""), paste(" Cases per 100k: ", per100k, sep="") , paste(" Deaths per 100k: ", deathsper100k, sep=""), paste(" CFR (%): ", naive_CFR,sep=""), sep = "<br>")) %>% layout(title = "Cases, Deaths, and Naive Case Fatality Rate for US States", yaxis = list(title = "Cases"), xaxis = list(title = "Deaths"), hovermode = "compare") ``` --- ## 3D Scatterplot ``` ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ```
--- ## Scatterplot with `ggplotly()` - You can create a scatterplot with the `ggplotly()` function in 1 additional line of code - Here we have also added `geom_smooth()` to see the pattern in the scatter. Note that the `geom_smooth()` line also appers upon hover ```r p <- ggplot(cv_states_today, aes(x=deathsper100k, y=per100k, size=naive_CFR)) + geom_point() + geom_smooth() ggplotly(p) ``` --- ## Scatterplot with `ggplotly()`
--- ## Scatterplot with `ggplotly()` - You can add annotations to your interactive plot ```r p <- ggplot(cv_states_today, aes(x=deathsper100k, y=per100k, size=naive_CFR)) + geom_point() + geom_smooth() fig <- p %>% ggplotly(layerData = 2, originalData = F) %>% add_fun(function(p) { fig %>% slice(which.min(se)) %>% add_segments(x = ~x, xend = ~x, y = ~ymin, yend = ~ymax) %>% add_annotations("Minimum uncertainty") }) fig <- fig %>% add_fun(function(p){ fig %>% slice(which.max(se)) %>% add_segments(x = ~x, xend = ~x, y = ~ymin, yend = ~ymax) %>% add_annotations("Max uncertainty") }) fig ``` --- ## Scatterplot with `ggplotly()` --- ## Line graph - Specify a line plot using `type = "scatter"` and `mode = "lines"` - Be sure to specify the feature (column in the data) that distinguishes the lines (normally through `color`) ```r plot_ly(cv_states, x = ~date, y = ~deaths, color = ~state, type = "scatter", mode = "lines", hoverinfo = 'text', text = ~paste( paste("Date: ", date, sep=""), paste(state, ":", sep=""), paste(" Cases (total): ", cases, sep=""), paste(" Cases per 100k: ", per100k, sep=""), sep = "<br>")) ``` --- ## Line graph ``` ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ```
--- ## Line graph: `plot_ly()` vs. `ggplotly()` - Both `plot_ly()` and `ggplotly()` line plots can be specified with little code - simply pass a `ggplot` object to `ggplotly()` to create an interactive version - `subplot()` can be used to join arrange multiple plots -- works similarly to `grid.arrange()` function from the **gridExtra** package - Compare the automatic `tooltip` results for both plots ```r g1 = plot_ly(cv_states, x = ~date, y = ~deaths, color = ~state, type = "scatter", mode = "lines") g2 = ggplot(cv_states, aes(x = date, y = cases, color = state)) + geom_line() + geom_point(size = .5, alpha = 0.5) g2_plotly <- ggplotly(g2) subplot(g1, g2_plotly) ``` --- ## Line graph: `plot_ly()` vs. `ggplotly()` ``` ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ## Warning in RColorBrewer::brewer.pal(N, "Set2"): n too large, allowed maximum for palette Set2 is 8 ## Returning the palette you asked for with that many colors ``` ``` ## Warning: Can only have one: config ```
--- ## Specifying text with `ggplotly()` - You can specify the tooltip text in the `ggplot()` or `ggplotly()` prompt, but note that the `ggplotly()` prompt only accepts text in `" "` ```r g1 = ggplot(cv_states, aes(x = date, y = cases, color = state, text=paste( paste("Date: ", date, sep=""), paste(state, ":", sep=""), paste(" Cases (total): ", cases, sep=""),sep = "<br>") )) + geom_line() + geom_point(size = .5, alpha = 0.5) ggplotly(g1, tooltip = "text") ``` -- ## Specifying text with `ggplotly()`
--- ## Histograms - For `plot_ly()` use the `type = "histogram"` argument - Note that `list()` is used to input keys with multiple values (e.g. `xbins`) ```r g1 <- cv_states_today %>% plot_ly(x = ~new_deaths, type = "histogram", xbins = list(size = 1, end=30 )) g2 <- cv_states_today %>% ggplot( aes(x=new_deaths)) + geom_histogram(binwidth=1) g2_plotly <- ggplotly(g2) subplot(g1, g2_plotly) ``` --- ## Histograms ``` ## Warning: Can only have one: config ```
--- ## Heatmap - Heatmaps are useful for displaying three dimensional data in two dimensions, using color for the third dimension. - To create a heatmap from a dataframe we first have to create a matrix out of the three dimensions we want to include. We can do this using the `pivot_wider()` function from **tidyr** (there are many other options) - Here we are choosing `date`, `state`, and `newdeathsper100k` to show in our heatmap ```r library(tidyr) cv_states_mat <- cv_states %>% select(state, date, newdeathsper100k) %>% filter(date>"2020-03-31") %>% filter(newdeathsper100k < 10) cv_states_mat2 <- as.data.frame(pivot_wider(cv_states_mat, names_from = state, values_from = newdeathsper100k)) rownames(cv_states_mat2) <- cv_states_mat2$date cv_states_mat2$date <- NULL head(cv_states_mat2) ``` --- ## Heatmap - We can then create a heatmap from the matrix by using the `type = "heatmap"` argument - If you want the x and y axes to show specify that with `x=colnames(data), y=rownames(data)` - You can hide or show scale using `showscale=T/F` ```r library(tidyr) cv_states_mat <- cv_states %>% select(state, date, newdeathsper100k) %>% filter(date>"2020-03-31") %>% filter(newdeathsper100k < 10) cv_states_mat2 <- as.data.frame(pivot_wider(cv_states_mat, names_from = state, values_from = newdeathsper100k)) rownames(cv_states_mat2) <- cv_states_mat2$date cv_states_mat2$date <- NULL data <- as.matrix(cv_states_mat2) plot_ly(x=colnames(data), y=rownames(data), z=~data, type="heatmap", showscale=T) ``` --- ## Heatmap - We can then create a heatmap from the matrix by using the `type = "heatmap"` argument - If you want the x and y axes to show specify that with `x=colnames(data), y=rownames(data)` - You can hide or show scale using `showscale=T/F`
--- ## 3D Surface You can also create a 3D surface out of the matrix using `type = "surface"` ```r plot_ly(x=colnames(data), y=rownames(data), z=~data, type="surface", showscale=F) ``` --- ## 3D Surface
--- ## Choropleth Maps: Setup Choropleth maps illustrate data across geographic areas by shading regions with different colors. Choropleth maps are easy to make with Plotly though they require more setup compared to other Plotly graphics. Making choropleth maps requires two main types of input: 1. **Geometry information**: This can be supplied using: - **GeoJSON** file where each feature has either an id field or some identifying value in properties - or a **built-in geometry** within plot_ly: **US states** and **world countries** 2. **A list of values** indexed by feature identifier The GeoJSON data is passed to the geojson argument, and the data is passed into the **z argument** of the choropleth `trace` -- ## Choropleth Maps: Setup - Let's focus on interactively mapping the feature `naive_CFR` to each of the US states, including their boundaries - To use the USA States geometry, set `locationmode='USA-states'` and *provide locations as two-letter state abbreviations* - Our `cv_states` identifies states by their long names, so we need to transpose to their abbreviations first ```r cv_CFR <- cv_states_today %>% select(state, naive_CFR) # select data # Get state abbreviations and map to state names st_crosswalk <- tibble(state = state.name) %>% bind_cols(tibble(abb = state.abb)) %>% bind_rows(tibble(state = "District of Columbia", abb = "DC")) cv_CFR2 <- left_join(cv_CFR, st_crosswalk, by = "state") cv_CFR2$state.name <- cv_CFR2$state cv_CFR2$state <- cv_CFR2$abb cv_CFR2$abb <- NULL ``` --- ## Choropleth Maps: Setup - Hover text can be specified within the data frame (this is true for any `plot_ly()` object) ```r # Create hover text cv_CFR2$hover <- with(cv_CFR, paste(state.name, '<br>', "CFR:", naive_CFR)) # Set up mapping details set_map_details <- list( scope = 'usa', projection = list(type = 'albers usa'), showlakes = TRUE, lakecolor = toRGB('white') ) ``` --- ## Choropleth Maps: Mapping - Recall: To use the USA States geometry, set `locationmode='USA-states'` - Specify the map projection details inside `layout()` ```r # Create the map fig <- plot_geo(cv_CFR2, locationmode = 'USA-states') %>% add_trace( z = ~naive_CFR, text = ~hover, locations = ~state, color = ~naive_CFR, colors = 'Blues' ) fig <- fig %>% colorbar(title = "CFR") fig <- fig %>% layout( title = paste('CFR by State as of', Sys.Date(), '<br>(Hover for value)'), geo = set_map_details ) ``` --- ## Choropleth Maps: Mapping ``` ## Warning: Column `state` joining factor and character vector, coercing into ## character vector ```
--- ## A note on interactive mapping - There are actually 4 different ways to render sf objects with plotly: `plot_geo()`, `plot_ly()`, `plot_mapbox()`, and via **ggplot2**’s `geom_sf()`. - Plotly is a general purpose visualization library and doesn’t offer most fully featured geo-spatial visualization toolkit. If you run into limitations with plotly’s mapping functionality there are many other tools for interactive geospatial visualization in R, including: **leaflet**, **mapview**, **mapedit**, **tmap**, and **mapdeck**. --- # Interactive tables The `DT` package creates an interactive **DataTable** html widget out of a dataframe in 1 line of code: ```r library(DT) cv_california <- cv_states %>% filter(state=="California") %>% select(date,cases,deaths,new_cases,new_deaths,naive_CFR) datatable(cv_california) ``` --- ## Interactive tables
--- # Publishing views Both `plot_ly()` and `ggplotly()` objects and be computed directly as part of an R Markdown file, which means they will show up on a website you create using R Markdown and GitHub pages. But you may want to save and embed the interactive HTML file, or a static image based on the file. --- ## Saving and embedding HTML Any widget made from any **htmlwidgets** package (e.g., **plotly**, **leaflet**, **DT**, etc.) can be saved as a standalone HTML file via the `htmlwidgets::saveWidget()` function. By default, it produces a completely self-contained HTML file, meaning that all the necessary JavaScript and CSS dependency files are bundled inside the HTML file. If you want to embed numerous widgets in a larger HTML document, save all the dependency files externally into a single directory. You can do this by setting `selfcontained = FALSE` and specifying a fixed `libdir` in `saveWidget()`: ```r library(htmlwidgets) p <- plot_ly(x = rnorm(100)) saveWidget(p, "p1.html", selfcontained = F, libdir = "lib") saveWidget(p, "p2.html", selfcontained = F, libdir = "lib") ``` - If you want to share your visualizations on https://plot.ly/ you can make an account on their site --- ## Saving a static image - With code (convenient if you need to output many static images): Any **plotly** object can be saved as a static image via the `orca()` function. - From a browser (convenient if you want to manually post-process an image): By default, the 'download plot' icon in the modebar will download to PNG and use the `height` and `width` of the plot, but these defaults can be altered via the plot's configuration, e.g. ```r plot_ly() %>% config( toImageButtonOptions = list( format = "svg", filename = "myplot", width = 600, height = 700 ) ) ``` --- # Takeaways Hopefully in this class you have learned: * To appreciate how interactive visualization can help to explore data in ways static graphics cannot * Get an idea of the multitude of options available to you * Get inspired to create engaging, effective data visualizations and tell stories with your data and findings! --- ## Avoid pitfals * Don’t overcomplicate! * Only use when adding value! * Some examples of bad practices: [(link)](https://badvisualisations.tumblr.com/) * And just hilariously bad examples: [(link)](https://viz.wtf/) --- ## Next week - Explore how interactive visualization can be used in practice -- - Data science statistical genetics company, BioRealm.ai - NASA data science group --- # More Resources `Plotly` - [Plolty R Reference](https://plotly.com/r/reference) - [The Plotly R API](https://plot.ly/r/) - [The Plotly R Package on GitHub](https://github.com/ropensci/plotly) - [The Plotly R Cheatsheet](https://images.plot.ly/plotly-documentation/images/r_cheat_sheet.pdf) - ["Plotly for R" book by Carson Sievert](https://cpsievert.github.io/plotly_book/) `shiny` and dashboards - [The `Shiny` Website](http://shiny.rstudio.com) - [R Markdown: The Definitive Guide, Chapter 5: Dashboards (Layout, Components, Shiny)](https://bookdown.org/yihui/rmarkdown/dashboards.html) Website development in rmarkdown - [Tutorial: Creating websites in R](https://www.emilyzabor.com/tutorials/rmarkdown_websites_tutorial.html), Emily C. Zabor - [Creating websites with R Markdown](https://bookdown.org/yihui/blogdown/): advanced website creation with `blogdown`, `Hugo`, `Jeckyll` Data visualization best practices - [Data Visualization: A Practical Introduction](https://kieranhealy.org/publications/dataviz/), Kieran Healy - [Fundamentals of Data Visualization](https://serialmentor.com/dataviz/), Claus O. Wilke --- # References - ["Plotly for R" book by Carson Sievert](https://cpsievert.github.io/plotly_book/) - Coursera course on Developing Data Products, Johns Hopkins Data Science Lab: [(GitHub repo for all course materials) materials)](https://github.com/DataScienceSpecialization/Developing_Data_Products)